<template>
  <div>
    <h1>{{ msg }}</h1>
    <p>{{ msg }}</p>
    <button @click="msg = 'hello'">改变数据</button>
  </div>
</template>

<script>
export default {
  name: "Dome",

  data() {
    return {
      msg: "你好"
    };
  },

  beforeCreate() {
    console.log(1, this.msg);
  },
  created() {
    console.log(1, this.msg);
  },
  beforeMount() {
    console.log(1, document.querySelector("p"));
  },
  mounted() {
    console.log(1, document.querySelector("p"));
  },
  beforeUpdate() {
    console.log(1, document.querySelector("p").innerHTML);
  },
  updated() {
    console.log(1, document.querySelector("p").innerHTML);
  },
  beforeDestroy() {
    console.log(1);
  },
  destroyed() {
    console.log(1);
  },

  methods: {}
};
</script>

<style scoped>
</style>